<template>
  <div class="">
    <div class="all" :data-s="courseTab">
      <template v-if="courseTab !== 3">
      <div class="all-item" v-for="(item) in dataList" :key="'course' + item.id">
        <div class="all-item-l">
          <div class="title">
            <span class="tags">{{item.classesinfo}}</span>
            <span>{{item.course_type}}</span>
          </div>
          <div class="times">
            <span class="text">课程时间</span>
            <span>{{item.date}} {{item.s_time}} ~ {{item.e_time}}</span>
          </div>
        </div>
        <div class="all-item-r">
          <!-- <div class="btn study">进入课堂</div> -->
          <!-- <div class="btn no">未开始</div> -->
          <!-- <div class="btn study">开始学习</div> -->
          <!-- <div class="count">
            <p class="count-text">距离开课</p>
            <p class="count-time">剩余 19:15:29</p>
          </div> -->
          <courseInterval :data="item" @enterRoom="enterRoom" />
        </div>
      </div>
      </template>
      <template v-if="courseTab === 3">
      <div class="all-item zb-item" v-for="(item,i) in dataList" :Key="'course' + i" @click="handleDetail(item)">
        <div class="all-item-l">
          <div class="title">
            <span class="tags">{{item.classesinfo}}</span>
            <span>{{item.course_type}}</span>
          </div>
          <div class="times">
            <span class="text">课程时间</span>
            <span>{{item.date}} {{item.s_time}} ~ {{item.e_time}}</span>
          </div>
        </div>
        <div class="all-item-r">
          <!-- <div class="btn study">进入课堂</div> -->
          <!-- <div class="btn no">未开始</div> -->
          <!-- <div class="btn study">开始学习</div> -->
          <!-- <div class="count">
            <p class="count-text">距离开课</p>
            <p class="count-time">剩余 19:15:29</p>
          </div> -->
          <a-button size="small" class="enter-btn" type="primary" shape="round" v-if="courseTab === 3">进入学习</a-button>
        </div>
      </div>
      </template>
    </div>
    <no-class v-if="isNone" />
    <div class="main-page" v-if="dataList.length > 0 && totalPage > 1">
      <template>
        <a-pagination v-model="query.page" :total="total" show-less-items />
      </template>
    </div>
  </div>
</template>
<script>
import noClass from './noClass.vue'
import { enterRoom } from "@/utils/tools";
import {
  Pagination
} from "ant-design-vue"
import {
  postForm,
} from "@/services"
import courseInterval from "@/views/mycourse/courseInterval";
import courseStatus from "./courseInterval";
import { mapState } from "vuex";
export default {
  components: {
    courseInterval,
    courseStatus,
    'a-pagination': Pagination,
    'no-class': noClass
  },
  props: {
    courseTab: {
      type: Number,
      default: 0
    },
    page: {
      type: String,
      default: '1'
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    this.query.type = this.userInfo.is_assist.toString()
  },
  data () {
    return {
      dataList: [],
      total: 0,
      totalPage: 0,
      query: {
        type: '0',
        // channel: '',
        // // is_end: '0',
        page: 1,
        size: 10
      },
      isNone: false
    }
  },
  watch: {
    query: {
      handler (newVal, oldVal) {
        this.loadData()
      },
      immediate: false,
      deep: true
    }
  },
  methods: {
    enterRoom (data) {
      enterRoom(data, this)
    },
    loadData () {
      this.isNone = false
      // this.dataList = []
      this.query.type = this.query.type.toString()
      postForm('/usercenter/coursetable', this.query).then((r) => {
        if (r.code == 1) {
          // r.data.lists = [
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' },
          //   { 'classesinfo': 'fifewnfen', 'course_type': 2, 'date': '29940200' }
          // ]
          // console.log(r.data.lists)
          if (r.data.lists.length === 0 && this.query.page === 1) {
            this.dataList = r.data.lists
            this.isNone = true
            return
          }
          this.dataList = r.data.lists
          this.total = r.data.total
          this.totalPage = Math.ceil(this.total / this.query.size)
          // if (+that.query.channel == 3) { // 录播课
          //   that.dataList = r.data
          // } else {
          //   for (let date in r.data) {
          //     that.dataList = that.dataList.concat(r.data[date])
          //   }
          // }
        }
      })
    },
    setQuery (query) {
      this.query = Object.assign({}, this.query, query)
    },
    handleDetail (item) {
      this.$router.push({
        path: '/courseDetail',
        query: {
          id: item.id ? item.id : '',
          index: 1
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.all {
  .zb-item {
    cursor: pointer;
  }
  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
    border-bottom: 1px solid #E0E0E0;
    padding: 0 20px;
    &-l {
      .title {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        .tags {
          display: block;
          width: 48px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #fff;
          background: #27BFA3;
          border-radius: 4px;
          margin-right: 10px;
        }
      }
      .times {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #A5A5A5;
        margin-top: 10px; // 要改间距
        .text {
          margin-right: 10px;
        }
      }
    }
    &-r {
      .btn {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        opacity: 1;
        border-radius: 25px;
      }
      .no {
        background-color: #DBDBDB;
      }
      .study {
        background-color: #27BFA3;
      }
      .enter-btn {
        width: 120px;
        height: 40px;
        font-size: 16px;
      }
      .count {
        text-align: center;
        &-text {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 21px;
          color: #27BFA3;
        }
        &-time {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 21px;
          color: #333333;
        }
      }
    }
  }
}
.main-page {
  text-align: center;
  margin-top: 60px;
}
/deep/.ant-pagination-prev,/deep/.ant-pagination-next {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-color: #EFEFEF;
  // i {
  //   display: none;
  // }
}
/deep/.ant-pagination-prev,/deep/.ant-pagination-next {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-color: #EFEFEF;
  border-radius: 6px;
  a {
    border-radius: 6px;
  }
  // i {
  //   display: none;
  // }
}
/deep/.ant-pagination-item {
  width: 30px;
  height: 30px;
  min-width: 30px;
  text-align: center;
  border-radius: 6px;
  a {
    display: inline-block;
    line-height: 29px;
    padding: 0;
  }
}
/deep/.ant-pagination-item-active {
  background: #27BFA3;
  border-color: none;
  border: none;
  a {
    color: #fff;
    line-height: 30px;
  }
}
</style>
